<template>

  <div>{{ name }}</div>
  {{ ptoRef }}
  <button @click="onChange($refs)">按钮</button>
  {{ computed1 }}
  {{ pp }}

  孩子给的值：{{
    toy
  }}
  <prenson a="hh" :list="pp2" :sedToy="getToy" @sedToy2="getToy2" ref="prenson1"></prenson>
  <!-- <prenson ref="prenson2"></prenson> -->

  <router-view></router-view>
</template>

<script lang="ts" setup>
import emitter from '../../utils/emitter';
import prenson from '../../components/prenson.vue';
import { type person, type p2 } from '@/types/index'
import { reactive, ref, toRefs, toRef, computed, watch, watchEffect, provide, inject } from "vue";


let prenson1 = ref()



emitter.on('sed-toy', (value) => {

  console.log('sed-toy', value);

})

let toy = ref()
function getToy2(val: string) {

  toy.value = val

}

function getToy(val: string) {

  toy.value = val
  console.log(prenson1.value, 'prenson1');
}



let pp: person = {
  name: 'xingm', age: 22
}
let pp2: p2 =
  [
    { name: 'xingm', age: 22 }
  ]

let sum = ref(0)
function undata(params: any) {

  sum.value += params
  console.log(sum.value,'sssssss');
  

}
provide('money', { sum, undata })
watch(sum, (a, b) => {
  console.log(a, b);

})

watchEffect(() => {
  if (sum.value > 5) {
    console.log('大于了');
  }
})


const computed1 = computed(() => {
  return new Date()
})

const obj = reactive({
  name: '张三',
  age: 2
})

let { name, age } = toRefs(obj)
let ptoRef = toRef(obj, 'age')
console.log(name);

let p = ref(1)
console.log(p.value);

function onChange(refs: any) {
  // name.value += '22'
  obj.name += '222'
  console.log(name.value);
  sum.value += 1
  console.log(prenson1.value.t, refs.prenson1.t, 'prenson1');
  for (const key in refs) {
    refs[key].t += 1
  }
}


</script>